<template>
  <div id="app" style="padding: 16px;">
    <el-divider content-position="left">模型文件基础信息</el-divider>
    <el-form v-if="form" ref="form" :model="form" label-width="140px">
      <el-row>
        <el-col :span="5" :offset="2">
          <el-form-item label="作者">
            <el-tooltip class="item" effect="dark" :content="form.author" placement="top-start">
              <el-input v-model="form.author" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="邮箱">
            <el-tooltip class="item" effect="dark" :content="form.email" placement="top-start">
              <el-input v-model="form.email" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5" :offset="2">
          <el-form-item label="模块名">
            <el-tooltip class="item" effect="dark" :content="form.model_name" placement="top-start">
              <el-input v-model="form.model_name" @input="inputModelName" @change="changeModelName" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="父模块名">
            <el-tooltip class="item" effect="dark" :content="form.base_crud_class" placement="top-start">
              <el-input v-model="form.base_crud_class" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="2">
          <el-form-item label="crud文件名">
            <el-tooltip class="item" effect="dark" :content="form.file_name" placement="top-start">
              <el-input v-model="form.file_name" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="crud对象">
            <el-tooltip class="item" effect="dark" :content="form.crud_obj" placement="top-start">
              <el-input v-model="form.crud_obj" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="2">
          <el-form-item label="model文件名">
            <el-tooltip class="item" effect="dark" :content="form.model_file_name" placement="top-start">
              <el-input v-model="form.model_file_name" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="schema文件名">
            <el-tooltip class="item" effect="dark" :content="form.schema_file_name" placement="top-start">
              <el-input v-model="form.schema_file_name" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="2">
          <el-form-item label="schema新增对象">
            <el-tooltip class="item" effect="dark" :content="form.schema_create_class" placement="top-start">
              <el-input v-model="form.schema_create_class" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="schema更新对象">
            <el-tooltip class="item" effect="dark" :content="form.schema_update_class" placement="top-start">
              <el-input v-model="form.schema_update_class" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="2">
          <el-form-item label="schema分页对象">
            <el-tooltip class="item" effect="dark" :content="form.schema_page_class" placement="top-start">
              <el-input v-model="form.schema_page_class" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">导入包列表</el-divider>
      <el-row>

        <div v-for="(pkg, pkg_index) in form.import_pkg_list" :key="pkg_index">
          <el-col :span="2" style="padding-left: 16px;">
            <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addImportPkg"/>
            <el-button type="danger" icon="el-icon-minus" circle size="mini" @click="delImportPkg(pkg_index)"/>
          </el-col>

          <el-col :span="5">
            <el-form-item label="导入位置(from)">
              <el-tooltip class="item" effect="dark" :content="pkg.from" placement="top-start">
                <el-input v-model="pkg.from" size="small"/>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-tooltip class="item" effect="dark" :content="pkg.import" placement="top-start">
              <el-form-item label="导入内容(import)">
                <el-input v-model="pkg.import" size="small"/>
              </el-form-item>
            </el-tooltip>
          </el-col>
        </div>
      </el-row>
      <el-divider content-position="left">模型字段</el-divider>
      <el-row v-for="(field, field_index) in form.fields" :key="field_index">

        <el-col :span="2" style="padding-left: 16px;">
          <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addField"/>
          <el-button type="danger" icon="el-icon-minus" circle size="mini" @click="delField(field_index)"/>
        </el-col>

        <el-col :span="5">
          <el-form-item label="字段名">
            <el-tooltip class="item" effect="dark" :content="field.field_name" placement="top-start">
              <el-input v-model="field.field_name"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="字段类型">
            <el-tooltip class="item" effect="dark" :content="field.field_type_class" placement="top-start">
              <el-select v-model="field.field_type_class" placeholder="字段类型" filterable>
                <el-option v-for="(item, index) in form.field_options" :key="index" :label="item.label"
                           :value="item.value"/>
              </el-select>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <div v-for="(attr, attr_index) in field.attrs" :key="attr_index">

          <el-col :span="2" style="padding-left: 16px;" :offset="getAttrOffset(attr_index)">
            <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addAttr(field_index)"/>
            <el-button type="danger" icon="el-icon-minus" circle size="mini"
                       @click="delAttr(field_index, attr_index)"/>
          </el-col>

          <el-col :span="5">
            <el-form-item label="字段属性">
              <el-tooltip class="item" effect="dark" :content="attr.key" placement="top-start">
                <el-select v-model="attr.key" placeholder="字段属性" filterable>
                  <el-option v-for="(item, index) in form.attr_options" :key="index" :label="item.label"
                             :value="item.value"/>
                </el-select>
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="属性值">
              <el-tooltip class="item" effect="dark" :content="attr.value" placement="top-start">
                <el-input v-model="attr.value"/>
              </el-tooltip>
            </el-form-item>
          </el-col>

        </div>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">生成</el-button>
        <el-button type="danger" @click="resetConfig" size="mini">恢复</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import interfaceObj from '../../api/crud'

export default {
  data () {
    return {
      form: null
    }
  },
  mounted () {
    this.resetConfig()
  },
  computed: {
    getAttrOffset () {
      return function (attrIndex) {
        if (attrIndex !== 0) {
          return 12
        }
      }
    }
  },
  methods: {
    addImportPkg () {
      this.form.import_pkg_list.push({
        from: '',
        pkg: ''
      })
    },
    delImportPkg (fieldIndex) {
      if (this.form.import_pkg_list.length === 1) {
        this.$message({
          message: '至少导入一个包'
        })
        return
      }
      this.form.import_pkg_list.splice(fieldIndex, 1)
    },
    inputModelName (content) {
      const wordList = content.match(/[A-Z][a-z]+/g)
      let lowerSplitName = ''
      if (wordList !== null) {
        wordList.forEach((item, index) => {
          if (index !== (wordList.length - 1)) {
            lowerSplitName = lowerSplitName + item.toLowerCase() + '_'
          } else {
            lowerSplitName = lowerSplitName + item.toLowerCase()
          }
        })
        this.form.file_name = lowerSplitName
        this.form.crud_obj = lowerSplitName
        this.form.model_file_name = lowerSplitName
        this.form.model_class = content
        this.form.schema_file_name = lowerSplitName
        this.form.schema_class = content
        this.form.schema_create_class = content + 'Create'
        this.form.schema_update_class = content + 'Update'
        this.form.schema_page_class = content + 'Page'
      }
    },
    changeModelName () {
      this.form.import_pkg_list.push({
        from: 'app.models.' + this.form.model_file_name,
        import: this.form.model_class
      })
      this.form.import_pkg_list.push({
        from: 'app.schemas.' + this.form.schema_file_name,
        import: this.form.schema_create_class + ', ' + this.form.schema_update_class + ', ' + this.form.schema_page_class
      })
    },
    onSubmit () {
      this.form.columns = []
      interfaceObj.generateCRUD(this.form).then(res => {
        console.log(res)
      })
    },
    resetConfig () {
      this.$axios.get('/crud_param.json').then(res => {
        this.form = res.data.form
        this.form.author = this.$store.state.author
        this.form.email = this.$store.state.email
        this.form.model_name = this.$store.state.moduleName
        this.changeModelName()
        this.inputModelName(this.$store.state.moduleName)
      })
    }
  }
}
</script>

<style>

</style>
